<!DOCTYPE html>

<html>
<head>
    <!-- 声明使用utf-8编码 -->
    <meta http-equiv="content-type" content="txt/html; charset=utf-8" />

    <!-- 使用EL表达式(${app_path})查出项目路径 -->
    <!-- jquery 核心 JavaScript 文件 -->
    <script src="/static/js/jquery-3.5.1.min.js"></script>
    <!-- Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!-- Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- Bootstrap alert 扩展 JavaScript 文件 -->
    <script src="/static/bootstrap-alert-extend/bootstrap-alert-extend.js"></script>
    <!-- JQuerySession 扩展 JavaScript 文件 -->
    <script src="/static/js/jquerysession.js"></script>
    <!-- 工具函数 JS 文件 -->
    <script src="/static/js/util.js"></script>
    <!-- 接口url链接 JS 文件 -->
    <script src="/static/js/urlInterface.js"></script>
    <!-- 信息码 JS 文件 -->
    <script src="/static/js/statusCode.js"></script>

    <title>注册页面</title>

    <style type="text/css">

        /*div[class|=col]{*/
        /*    border: 1px solid;*/
        /*}*/

        .form-control {
            height: 40px;
        }

    </style>
</head>

<body>
<div class="container-fluid">
    <div class="modal fade" tabindex="-1" role="dialog" id="register_modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
<!--                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
                    <!--注册标题-->
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3">
                            <h2 class="text-center">用户注册</h2>
                        </div>
                    </div>
                </div>
                <div class="modal-body">

                    <!--注册表单-->
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-sm-6 col-sm-offset-3">
                            <form id="add_user_form">
                                <div class="form-group">
                                    <label>用户名：</label>
                                    <input type="text" name="username" class="form-control" id="username_add_input"
                                           placeholder="请输入用户名">
                                    <span class="help-block"></span>
                                </div>
                                <div class="form-group">
                                    <label for="nickname">昵称：</label>
                                    <input type="text" name="nickname" class="form-control" id="nickname" placeholder="请输入昵称">
                                    <span class="help-block"></span>
                                </div>
                                <div class="form-group">
                                    <label for="password">密码：</label>
                                    <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码">
                                    <span class="help-block"></span>
                                </div>
                                <div class="form-group">
                                    <label for="password2">确认密码：</label>
                                    <input type="password" name="password2" class="form-control" id="password2" placeholder="请输入确认密码">
                                    <span class="help-block"></span>
                                </div>
                                <div class="form-group">
                                    <label for="Email">邮箱：</label>
                                    <input type="email"  name="email" class="form-control" id="Email" placeholder="请输入邮箱地址">
                                    <span class="help-block"></span>
                                </div>
                            </form>
                            <button id="register_btn" class="btn btn-primary" style="margin-top:10px;float:left;width: 40%;" disabled>注册</button>
                            <button id="to_login_btn" class="btn btn-info" style="margin-top:10px;float:right;width: 40%;">返回登录</button>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">

                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    $(function () {
        //弹出模态框
        $('#register_modal').modal({
            show: true,
            backdrop: 'static'
        });
        //给按钮绑定事件
        bindOnEvent();
    });

    /**
     * 该方法用于给控件绑定事件
     */
    function bindOnEvent() {
        //设置注册输入框们的点击事件
        $("input").bind("input propertychange", function () {
            checkRegisterForm();
        });

        //设置测试按钮的点击事件
        $("#test1_btn").click(function () {
            // showSingleError("username","用户名测试错误信息");
            checkRegisterForm();
        });

        //设置注册按钮的点击事件
        $("#register_btn").click(function () {
            let username = $("input[name='username']").val();
            let nickname = $("input[name='nickname']").val();
            let password = $("input[name='password']").val();
            let password2 = $("input[name='password2']").val();
            let email = $("input[name='email']").val();
            let registerData = {
                username: username,
                nickname: nickname,
                password: password,
                password2: password2,
                email:email
            };
            let registerJsonData = JSON.stringify(registerData);
            console.log("registerData:" + registerData);
            console.log("registerJsonData:" + registerJsonData);

            $.ajax({//请求注册
                url: registerInterface,
                data: registerJsonData,
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    console.log(result);
                    if (result.code == 200) {
                        alertUtil.message(result.msg);
                        let user = result.dataMap.user;
                        succeed(user);//注册成功后进行的操作
                    } else {
                        console.info(result.dataMap.errorMap);
                        alertUtil.message(result.msg, "danger");
                    }
                },
                error: function () {
                    alertUtil.message("服务器后端未响应!", "danger");
                }
            });
        });

        //设置跳转到登录按钮的点击事件
        $("#to_login_btn").click(function () {
            window.location.href = to_login;
        });
    }

    /**
     * 该方法用于检查表格，给后端传输数据，并返回验证信息
     */
    function checkRegisterForm(){
        //开始检查前必须将注册按钮给禁用
        $("#register_btn").attr("disabled","");

        let username = $("input[name='username']").val();
        let nickname = $("input[name='nickname']").val();
        let password = $("input[name='password']").val();
        let password2 = $("input[name='password2']").val();
        let email = $("input[name='email']").val();
        let registerData = {
            username: username,
            nickname: nickname,
            password: password,
            password2: password2,
            email:email
        };
        let registerJsonData = JSON.stringify(registerData);
        console.log("registerData:" + registerData);
        console.log("registerJsonData:" + registerJsonData);

        $.ajax({//请求验证注册信息
            url: registerInterface,
            data: registerJsonData,
            contentType: 'application/json;charset=utf-8',
            type: "PUT",
            //请求成功后的回调函数
            //result是请求成功后返回的Json结果
            success: function (result) {
                console.log(result);
                if (result.code == 200) {
                    clearAllError();//先清除所有错误
                    $("#register_btn").removeAttr("disabled");//去除按钮的disabled
                } else {
                    //获取错误信息对象
                    let errorMap = result.dataMap.errorMap;
                    //给输入框显示信息
                    console.info(errorMap);
                    clearAllError();//先清除所有错误
                    for(let inputName in errorMap){//js原生遍历
                        console.log("错误信息为:"+inputName+":"+errorMap[inputName]);//键值对
                        showSingleError(inputName,errorMap[inputName]);
                    }
                }
            },
            error: function () {
                alertUtil.message("服务器后端未响应!", "danger");
            }
        });
    }

    /**
     * 该方法用于给控件下方的位置显示错误
     */
    function showSingleError(inputName, errorMsg) {
        //添加错误显示并添加错误信息
        $("input[name='"+inputName+"']").parents(".form-group").addClass("has-error");
        $("input[name='"+inputName+"']").next().append(errorMsg);
    }

    /**
     * 该方法用于给所有控件下方的位置清除错误
     */
    function clearAllErrors() {
        $("input").parents(".form-group").removeClass("has-error");
        $("input").next().empty();
    }

    /**
     * 该方法用于注册成功后的一系列操作(包括跳转)
     */
    function succeed(user) {
        let userId = user.id+"";
        let nickname = user.nickname;
        let username = user.username;

        sessionStorage.setItem("userID",userId);//设置user_id
        sessionStorage.setItem("username",username);//设置用户名
        sessionStorage.setItem("nickname",nickname);//设置用户名

        window.location.href = to_index;
    }


</script>

</html>
